<template>
<!-- 常见问题 -->
    <div class='issue'>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" >
            <el-form-item>
                <el-button type="primary" plain icon="el-icon-plus" size="mini"  @click="handleAdd">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="list" >
            <el-table-column v-for='(it,inx) in columnlist' :key="inx" align="center" :label="it.label" :prop="it.prop" :width='it.width' :show-overflow-tooltip="it.showtoip" />
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button @click="editItem(scope.row,scope.$index)" type='text'>编辑</el-button>
                    <el-button @click="delItem(scope.row,scope.$index)" type='text'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
            <el-form ref="form" :model="resform" label-width="80px">
                <el-form-item label="问题标题">
                    <el-input v-model="resform.title" maxlength="200"></el-input>
                </el-form-item>
                <el-form-item label="问题内容">
                    <editor v-model="resform.content" :min-height="192"/>
                    <!-- <el-input v-model="resform.content" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"></el-input> -->
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="addItem">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { selectPages,addPageValue,updatePageValue,recordDelete} from "@/api/pc.js"
export default {
    name:'Issue',
    data(){
       return{
        loading:false,
        // 添加问题-弹窗标题
        dialogTitle:'',
        // 添加问题
        dialogVisible:false,
        // 表格搜索条件
        queryParams:{name:'',},
        // 表格表头
        columnlist:[
            {label:'问题标题',prop:'title'},
            {label:'问题内容',prop:'content',showtoip:true},
        ],
        // 表格数组
        list:[],
        // 编辑
        edit:false,
        // 编辑
        pageId:'',
        // 弹窗-对象
        resform:{
            title:'',
            content:''
        },
        //点击修改的下标
        indexlist:'',
       }
    },
    created(){this.getdata();},
    methods:{
        // 关闭弹窗
        handleClose(){
            this.dialogVisible=false;
        },
        // 添加问题
        addItem(){
            if(!this.resform.title){
                return this.$message.warning("请填写问题标题")
            }
            if(this.edit){
                this.list[this.indexlist] = this.resform;
            }else{
                this.list.push(Object.assign({},this.resform));
            }
            this.addserve();
            this.dialogVisible=false;
        },
        // 编辑
        editItem(val,inx){
            console.log(inx)
            this.indexlist = inx;
            this.resform = val;
            this.dialogVisible=true;
            this.edit=true;
        },
        // 删除
        delItem(val,inx){
            this.list.splice(inx,1);
            let objall = {list:this.list};
            let obj={pageName:'常见问题',pageType:'issue',pageValue:JSON.stringify(objall),pageId:this.pageId}
            updatePageValue(obj).then(res=>{
                console.log(res)
                if(res.code==200){this.$message.success('操作成功！')}
                this.getdata();
            })
        },
        handleAdd(){
            this.edit = false;
            this.resform={title:'',content:''};
            this.dialogVisible = true;
        },
        // 保存
        addserve(){
            let objall = {list:this.list}
            let obj={pageName:'常见问题',pageType:'issue',pageValue:JSON.stringify(objall),}
            if(this.list.length==0){
                addPageValue(obj).then(res=>{
                    console.log(res)
                    if(res.code==200){this.$message.success('操作成功！')}
                    this.getdata();
                })
            }else{
                obj.pageId = this.pageId;
                updatePageValue(obj).then(res=>{
                    console.log(res)
                    if(res.code==200){this.$message.success('操作成功！')}
                    this.getdata();
                })
            }
        },
        //获取列表
        getdata(){
            selectPages({pageType:'issue'}).then(res=>{
                if(res.code==200){
                    if(res.data.length==0){
                    }else{
                        this.pageId = res.data[0].pageId;
                        console.log(JSON.parse(res.data[0].pageValue))
                        let obk = JSON.parse(res.data[0].pageValue);
                        this.list = obk.list || [];
                    }
                }
            })
        },
    }
}
</script>
<style lang='scss' scoped>
.issue{
    width: 100%;
    height: 100%;
    padding: 20px;
}
.addserve{
    width: 100%;
    height: 40px;
    position: fixed;
    top:80px;
    left: 0;
    background-color: #fff;
    padding-right: 30px;
    z-index: 101;
    button{
        margin-top: 4px;
        width: 100px;
    }
}
</style>
<style >
.el-tooltip__popper{
    width: 400px;
}
</style>

